<template>
    <div class="image-popups" v-bind:style="{width: width, height: height}">
        <img :src="src" :width="width" :height="height" :origin-src="originSrc" data-target="image-popups"
             class="cursor-pointer" @click.prevent="popups" :data-type="type">
        <div class="image-popups-side animated" v-show="show" :class="animate">
            <span class="btn close-i btn-danger" @click="close"><icon type="fa-times"/></span>
            <span class="btn prev-i btn-default" @click="prev"><icon type="fa-angle-double-left"/></span>
            <span class="btn next-i btn-default" @click="next"><icon type="fa-angle-double-right"/></span>
            <span class="image-popups-tip">{{index + 1}}/{{imageList.length}}</span>
            <div class="image-popups-content display-flex" @click.stop.prevent="close">
                <img :src="image" class="animated" :class="imageAnimate"/>
            </div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */
    import Icon from './Icon.vue';

    export default {
        components: {Icon},
        name: 'ImagePopups',
        data () {
            return {
                index: -1,
                imageList: [],
                show: false,
                image: this.originSrc,
                animate: '',
                imageAnimate: ''
            };
        },
        props: {
            src: {type: String, required: true},
            width: {type: String},
            height: {type: String},
            originSrc: {type: String, required: true},
            type: {type: String | Number, default: 'all'}
        },
        methods: {
            popups () {
                this.show = true;
                this.initImageData();
                if (this.animate !== '') {
                    return;
                }
                this.animate = 'bounceInDown';
                setTimeout(() => {
                    this.animate = '';
                }, 1000);
            },
            prev () {
                this.index--;
                if (this.index < 0) {
                    this.index = this.imageList.length - 1;
                }
                this.setImage();
            },
            next () {
                this.index++;
                if (this.index >= this.imageList.length) {
                    this.index = 0;
                }
                this.setImage();
            },
            close () {
                if (this.animate !== '') {
                    return;
                }
                this.animate = 'bounceOutUp';
                setTimeout(() => {
                    this.show = false;
                }, 1000);
            },
            initImageData () {
                let images = $(`img[data-target="image-popups"][data-type="${this.type}"]`);
                let list = [];
                let index = 0;
                let thisSrc = this.src;
                images.each(function (key, val) {
                    let src = val.getAttribute('src');
                    if (src === thisSrc) {
                        index = key;
                    }
                    list.push(val.getAttribute('origin-src'));
                });
                this.index = index;
                this.imageList = list;
            },
            setImage () {
                this.imageAnimate = 'bounceOutRight';
                setTimeout(() => {
                    this.image = this.imageList[this.index];
                    this.imageAnimate = 'bounceInLeft';
                }, 1000);
            }
        },
        watch: {
            show (val) {
                if (val === false) {
                    this.animate = '';
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "~animate.scss/vendor/assets/stylesheets/animate/bounceOutRight.scss";
    @import "~animate.scss/vendor/assets/stylesheets/animate/bounceInLeft.scss";
    .image-popups {
        .image-popups-side {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 1050;
            background-color: rgba(0, 0, 0, .5);
        }
    }
    .btn {
        position: fixed;
        z-index: 1052;
        top: 50%;
        &.close-i {
            right: 10px;
            top: 10px;
        }
        &.prev-i {
            left: 0;
        }
        &.next-i {
            right: 0;
        }
    }

    .image-popups-content {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1051;
        img {
            max-height: 100%;
            max-width: 100%;
        }
    }
    .image-popups-tip {
        position: absolute;
        left: 0;
        bottom: 20px;
        text-align: center;
        color: white;
        width: 100%;
    }
</style>
